<template>
    <div class="full-in-main forbid-select user-info-container">
        <el-tabs tab-position="left" class="user-tabs" v-model="activeTab">
            <el-tab-pane label="基础信息" name="baseInfo">
                <baseInfo />
            </el-tab-pane>
            <el-tab-pane label="积分信息" name="point" lazy>
                <Point />
            </el-tab-pane>
            <el-tab-pane label="接口信息" name="api" lazy>
                <Api />
            </el-tab-pane>
        </el-tabs>
        <div class="logout-button" @click="logout">退出登录</div>
    </div>
</template>

<script setup>
import Api from '@/components/userInfo/api.vue'
import Point from '@/components/userInfo/point.vue'
import { useTabPaneAnimation, useElMessageBox } from "@/hooks"
import { useUserStore } from '@/pinia'
import router from '@/router'

let activeTab = $ref("baseInfo")
useTabPaneAnimation(() => activeTab)
const userStore = useUserStore()

const logout = () => {
    useElMessageBox("提示", "退出当前用户登录状态?", { type: "warning", showCancelButton: true, ignoreCancel: true }).then(() => {
        router.push("/")
        userStore.logout()
    })
}
</script>

<style>
.user-tabs {
    padding: 20px;
    height: calc(100% - 40px);
}

.user-tabs .el-tabs__item {
    font-size: 18px;
    height: 60px;
}

.logout-button {
    position: absolute;
    left: 27px;
    bottom: 20px;
    background: rgba(255, 255, 255, .5);
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}

.user-tabs .el-tabs__content {
    height: 100%;
}

.user-tabs .el-tab-pane {
    height: 100%;
}

.user-info-container .button {
    width: 30px;
    height: 30px;
    background: rgb(167 167 167 / 50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
}

.user-info-container .button+.button {
    margin-left: 5px;
}
</style>